import Konva from "konva";

export function layerAdd(type,obj,layer){
    let o = null
    if (type === 'Line'){
        o = new Konva.Line(obj);
    }else if (type === 'Rect'){
        o = new Konva.Rect(obj);
    }else if(type === 'Text'){
        o = new Konva.Text(obj);
    }
    layer.add(o)
    return o
}

export function konvaInitializeDrawing(layer){
    layerAdd('Line',{points: [0, 80, 220, 80], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Line',{points: [0, 150, 220, 150], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Rect',{x: 70, y: 20, width: 600, height: 200, stroke: 'black', strokeWidth: 2},layer)
    layerAddImg(layer,{x: 80,y: 49.5,width: 70,height: 70})
    layerAddImg(layer,{x: 80,y: 49.5 + 70,width: 70,height: 70})
    layerAdd('Rect',{x: 220, y: 50, width: 180, height: 130, stroke: 'black', strokeWidth: 2},layer)
    layerAdd('Rect',{x: 300, y: 110, width: 160, height: 90, stroke: 'black', strokeWidth: 2},layer)
    layerAdd('Rect',{x: 230, y: 70, width: 160, height: 90, fill: '#fff', stroke: 'black', strokeWidth: 2},layer)
    layerAdd('Line',{points: [230, 160, 390, 70], stroke: '#000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAddImg(layer,{x: 360,y: 165,width: 70,height: 70},'ground',false)
    layerAdd('Line',{points: [400, 80, 500, 80], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Line',{points: [500, 40, 500, 200], stroke: '#000', strokeWidth: 4, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Line',{points: [500, 60, 1050, 60], stroke: '#ff0000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAddImg(layer,{x: 870,y: 25,width: 70,height: 70},'switch')
    layerAddImg(layer,{x: 950,y: 25,width: 70,height: 70},'device',false)
    layerAdd('Text',{x: 80, y: 30, text: 'DC-A05', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 90, y: 58, text: '100A/3P', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 90, y: 58+70, text: '100A/3P', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 230, y: 53, text: '48/600A直流电源', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 240, y: 90, text: 'AC', fontSize: 30, fill: '#000' },layer)
    layerAdd('Text',{x: 320, y: 120, text: 'DC', fontSize: 30, fill: '#000' },layer)
    layerAdd('Text',{x: 940, y: 0, text: '智能电量仪', fontSize: 18, fill: '#000' },layer)

    layerAdd('Line',{points: [0, 480, 220, 480], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Line',{points: [0, 550, 220, 550], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    // layerAdd('Line',{points: [0, 550, 220, 550], stroke: '#ffff00', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Rect',{x: 70, y: 420, width: 600, height: 200, stroke: 'black', strokeWidth: 2},layer)
    layerAddImg(layer,{x: 80,y: 449.5,width: 70,height: 70})
    layerAddImg(layer,{x: 80,y: 449.5 + 70,width: 70,height: 70})
    layerAdd('Rect',{x: 220, y: 450, width: 180, height: 130, stroke: 'black', strokeWidth: 2},layer)
    layerAdd('Rect',{x: 300, y: 510, width: 160, height: 90, stroke: 'black', strokeWidth: 2},layer)
    layerAdd('Rect',{x: 230, y: 470, width: 160, height: 90, fill: '#fff', stroke: 'black', strokeWidth: 2},layer)
    layerAdd('Line',{points: [230, 470+90, 390, 470], stroke: '#000', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAddImg(layer,{x: 360,y: 565,width: 70,height: 70},'ground',false)
    layerAdd('Line',{points: [400, 480, 500, 480], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Line',{points: [500, 440, 500, 600], stroke: '#000', strokeWidth: 4, lineCap: 'round', lineJoin: 'round'},layer)
    layerAdd('Line',{points: [500, 460, 1050, 460], stroke: '#0000ff', strokeWidth: 2, lineCap: 'round', lineJoin: 'round'},layer)
    layerAddImg(layer,{x: 870,y: 425,width: 70,height: 70},'switch')
    layerAddImg(layer,{x: 950,y: 425,width: 70,height: 70},'device',false)
    layerAdd('Text',{x: 80, y: 430, text: 'DC-A05', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 90, y: 458, text: '100A/3P', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 90, y: 458+70, text: '100A/3P', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 230, y: 453, text: '48/600A直流电源', fontSize: 14, fill: '#000' },layer)
    layerAdd('Text',{x: 240, y: 490, text: 'AC', fontSize: 30, fill: '#000' },layer)
    layerAdd('Text',{x: 320, y: 520, text: 'DC', fontSize: 30, fill: '#000' },layer)
    layerAdd('Text',{x: 940, y: 425-25, text: '智能电量仪', fontSize: 18, fill: '#000' },layer)
}
export function konvaInitAndSetEvent(stage){
    stage.on('wheel', (evt) => {
        const oldScale = stage.scaleX();
        const pointer = stage.getPointerPosition();
        const scaleBy = 1.1; // 缩放比例，1.1 表示每次缩放增加10%
        const mousePointTo = {
            x: (pointer.x - stage.x()) / oldScale,
            y: (pointer.y - stage.y()) / oldScale,
        }; // 将鼠标指针相对于画布的位置转换为相对于缩放后的画布位置
        const newScale = evt.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy; // 根据滚轮方向决定是放大还是缩小
        stage.scale({x: newScale, y: newScale}); // 应用新的缩放比例
        stage.position({ // 保持鼠标指针在缩放后的位置上不变
            x: pointer.x - mousePointTo.x * newScale,
            y: pointer.y - mousePointTo.y * newScale,
        });
        stage.batchDraw(); // 刷新舞台以显示新的缩放状态
    });
}

export function layerAddImg(layer,obj,imgName='openswitch',bg=true){
    const image = new Image();
    image.onload = () => {
        // 图片加载完成后，更新 imagezongkai 变量s
        const aMainSwitchImage2 = new Konva.Image({...obj,image: image});
        layer.add(aMainSwitchImage2);
    };
    image.src = require("@/assets/" + imgName + ".png");
    if(bg){
        // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
        const whiteCover = new Konva.Rect({
            x: obj.x,
            y: obj.y,
            width: obj.width,
            height: obj.height,
            fill: '#fff'
        });
        // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
        layer.add(whiteCover);
    }
}